<template>
  <a-config-provider :locale="locale">
    <div
      id="workApproval"
      class="hide-scroller-bar"
      :style="appStyle"
      v-if="showApp"
    >
      <router-view v-slot="{ Component }">
        <keep-alive :include="keepAliveRoutes">
          <component :is="Component" />
        </keep-alive>
      </router-view>
    </div>
  </a-config-provider>
</template>

<script>
import { computed, ref, onMounted } from "vue";
import store from "./store/index";
import i18n from "./locale/index";
import routes from "./router/router.config";
import utils from "./common/utils/utils";
export default {
  name: "app",
  setup() {
    // antdesign多语言
    const locale = computed(
      () => i18n.global.getLocaleMessage(store.getters.lang).antLocale
    );

    // 获取需要缓存的页面name
    let routesArr = [];
    utils.getKeepAliveRoutes(routes, routesArr);
    const keepAliveRoutes = ref(routesArr);

    // 设置和监听容器高度并作出适应
    const appStyle = computed(() => {
      if (store.getters.appHeight) {
        return { height: `${store.getters.appHeight}px` };
      }
      return { height: `100%` };
    });

    const showApp = ref(false);

    onMounted(() => {
      const loadingRef = document.getElementById("pageLoading");
      if (loadingRef?.parentNode) {
        loadingRef.parentNode.removeChild(loadingRef);
      }

      //被引用的时候限制高度，舍弃掉原本的 height:100vh
      const qiankunHeads = document.querySelectorAll(".pageBox");
      if (qiankunHeads && qiankunHeads.length) {
        qiankunHeads.forEach((qh) => {
          const qiankunDiv = qh.parentNode;
          if (qiankunDiv) {
            qiankunDiv.style.height = "100%";
            setTimeout(() => {
              qh.style.height = "100%";
            }, 0);
          }
        });
      }
      setTimeout(() => {
        showApp.value = true;
      }, 10);
    });

    return {
      appStyle,
      locale,
      keepAliveRoutes,
      showApp,
    };
  },
};
</script>

<style lang="less">
#workApproval {
  width: 100%;
  height: 100%;
  overflow-x: auto;
}
::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
}
::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 0;
}
::-webkit-scrollbar-thumb {
  cursor: pointer;
  border-radius: 10px;
  background-color: #C1C1C1;
  background-clip: padding-box;
  transition: color 0.2s ease;
  border: 4px solid transparent; /* 滚动条边框 */
}
::-webkit-scrollbar-thumb:hover {
  background-color: #7D7D7D;
}
</style>
